<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    header a{
      text-decoration: none;
      color: #6c6c6c;
    }
    .el-table .el-table__cell{
      padding: 0;
    }
    .el-table .cell{
      white-space: nowrap;/*设置内容不换行*/
      text-overflow: ellipsis;/*又超出显示范围的文本时显示*/
    }
  /**/

  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="150px">
      <div style="width: 2200px;margin: 0 auto">
        <el-row :gutter="20">
          <el-col :span="4"><div class="grid-content bg-purple"><a href="/"><img src="images/stumalllogo.png"></a></div></el-col>
          <el-col :span="7" style="float: right"><div class="grid-content bg-purple" >
            <div class="line"></div>
            <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect2"
                    text-color="#f"
            >
              <el-menu-item index="1"class="el-icon-star-on">收藏</el-menu-item>
              <el-menu-item index="2"class="el-icon-s-order">订单</el-menu-item>
              <el-menu-item index="3"class="el-icon-shopping-cart-full">购物车</el-menu-item>
              <el-submenu index="4">
                <template slot="title" class="el-icon-s-tools">管理</template>
                <el-menu-item index="4-1"class="el-icon-s-operation">修改密码</el-menu-item>
                <el-menu-item index="4-2"class="el-icon-user-solid">个人资料</el-menu-item>
                <el-menu-item index="4-3"class="el-icon-picture">上传头像</el-menu-item>
                <el-menu-item index="4-4"class="el-icon-s-home">收货管理</el-menu-item>
              </el-submenu>
              <el-menu-item index="5"class="el-icon-s-custom"     v-if="user==null">登录</el-menu-item>
              <el-menu-item index="6"class="el-icon-edit-outline" v-if="user==null">注册</el-menu-item>
              <el-menu-item index="7"class="el-icon-sunny" v-if="user!=null">欢迎回来</el-menu-item>
              <el-menu-item index="8"class="el-icon-switch-button" v-if="user!=null">退出登录</el-menu-item>
            </el-menu>
          </div></el-col>
        </el-row>
      </div>

      <div style="background-color: #82c8ec">
        <el-menu style="width: 1200px;margin: 0 auto"
                 :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect"
                 background-color="#82c8ec"
                 text-color="#fff"
                 active-text-color="#fff">
          <el-menu-item v-for="c in categoryArr"  :index="c.id">{{c.name}}</el-menu-item>
          <div style="float: right;position: relative;top: 10px">
            <el-input placeholder="请输入搜索内容" v-model="wd">
              <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
            </el-input>
          </div>
        </el-menu>
      </div>
    </el-header>
    <!--功能按钮开始-->
    <div style="margin: 0 auto">
      <el-row>
        <!--<el-button icon="el-icon-search" size="mini" @click="selectProudct()" round>综合</el-button>
        <el-button icon="el-icon-d-caret" size="mini" @click="selectSale()" round>销量</el-button>
        <el-button icon="el-icon-d-caret" size="mini" @click="selectPri()" round>价格</el-button>

          <input type="text" size="20" v-model="priceBut.minPrice" placeholder="sss">-<input type="text" v-model="priceBut.maxPrice" placeholder="sss">  <el-button
              @click="selectButPri()" size="mini" plain>查找</el-button>-->

        <el-row >
          <el-col span="11">
            <el-button icon="el-icon-search" size="mini" @click="selectProudct()" round>综合</el-button>
            <el-button icon="el-icon-d-caret" size="mini" @click="selectSale()" round>销量</el-button>
            <el-button icon="el-icon-d-caret" size="mini" @click="selectPri()" round>价格</el-button>
          </el-col>
          <el-col span="4">
            <div style="width: 100px;height: 1px;">
              <el-input size="mini" v-model="priceBut.minPrice" placeholder="请输入价格"></el-input>
            </div>
          </el-col>
          <el-col span="1">
            <div style="width: 100px;height: 1px;">
               -
            </div>
          </el-col>
          <el-col span="4">
            <div style="width: 100px;height: 1px;">
            <el-input v-model="priceBut.maxPrice" size="mini" placeholder="请输入价格"></el-input>
            </div>
          </el-col>
          <el-col span="4">
            <div style="width: 100px;height: 1px;">
              <el-button @click="selectButPri()" size="mini" plain>查找</el-button>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </div>


    <!--功能按钮结束-->
    <el-main style="width: 1200px;margin: 0 auto">
      <!--商品列表开始-->

      <el-row gutter="20">
        <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
          <el-card>
            <a :href="'/detail.html?id='+p.id">
              <img :src="p.url" width="100%" height="200" alt="">
            </a>
            <div>
              <p style="font-size: 15px;height: 40px;margin-top: 0">
                <a style="text-decoration: none;color: #3f3f3f" :href="'/detail.html?id='+p.id">
                  {{p.title}}</a></p>
              <p style="font-size: 12px;color: #666">
                ￥{{p.price}} 浏览量:{{p.viewCount}}</s>
                <span style="float: right">销量:{{p.saleCount}}件</span>
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!--商品列表结束-->
    </el-main>


<!--测试-->


      <div class="block" style="margin: 0 auto">
<!--        <span class="demonstration">显示总数</span>-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :page-size="8"
                background="true"
                layout="total, prev, pager, next"
                :total="totalNum">
        </el-pagination>


      </div>




<!--测试-->



    <el-footer>
<!--      <div style="height: 95px;background-image: url('imgs/wave.png')">-->
<!--      </div>-->
      <div style="background-color: #3f3f3f;padding:30px 0;text-align: center;color: #b1b1b1">
        <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
        </p>
        <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
      </div>
    </el-footer>
  </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        valNum:1,
        totalNum:5,
        currentPage1: 1,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,

        //头部结束
        navArr:[{name:'活动'}],
        activeIndex2: '',
        user:null,
        //以上都是头部内容
        pNum:0,
        priceBut:{},
        buttonSale:true,//true为降序
        buttonPri:true,
        categoryArr:[
          {id:1,name:"导航1"},
          {id:2,name:"导航2"},
          {id:3,name:"导航3"}],
        activeIndex:"1",
        wd:"",
        productArr:[]
      }
    },
    methods: {
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        v.priceBut.val=val;
          axios.post("/product/selectByVal?val="+val).then(function (response) {
            v.productArr=response.data;

          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      //head开始
      handleSelect2(key, keyPath) {
        console.log(key, keyPath);
        if(key==1){
          location.href="";
        }else if(key==2){
          location.href="";
        }else if(key==3){
          location.href="";
        }else if(key=='4-1'){
          location.href="/login1.html";
        }else if(key=='4-2'){
          location.href="";
        }else if(key=='4-3'){
          location.href="";
        }else if(key=='4-4'){
          location.href="";
        }else if(key==5){
          location.href="/login.html";
        }else if(key==6){
          location.href="/reg.html";
        }else if(key==7){

        }else if(key==8){
          alert("退出")
        }
      },//head结束
      handleSelect(key,keyPath){
        console.log(key,keyPath);
        //key上面设置了45行设置了index的值 index就是可以  跳转结果页面
        axios.get("/product/selectByCId?id="+key).then(function (response) {
          v.productArr=response.data;
        })
        // location.href="/result.html?id="+key 这么写浪费资源用上面的方法
      },
      search(){
        // location.href="/result.html?wd="+v.wd;
        axios.get("/product/selectBytest?wd="+v.wd).then(function (response) {
          v.productArr=response.data;
        })
      },
    //  功能按钮开始
      selectButPri(){ //价格区间
        axios.post("/product/selectButPri",v.priceBut).then(function (response) {
          v.productArr=response.data;
          v.pNum=1;
        })
      },
      selectProudct(){//查询全部
        axios.get("/product/select").then(function (response) {
          v.productArr=response.data;
          v.pNum=0;
        })
      },
      selectSale(){
        if (v.pNum==0){
          if (v.buttonSale) {
            axios.get("/product/selectSaleT").then(function (response) {
              v.productArr = response.data;
              v.buttonSale = false;
            })
          }else {
            axios.get("/product/selectSaleF").then(function (response) {
              v.productArr=response.data;
              v.buttonSale=true;
            })
          }
        }else if(v.pNum==1){//销量
          if(v.buttonSale){
            axios.post("/product/selectSaleT2",v.priceBut).then(function (response) {
              v.productArr=response.data;
              v.buttonSale=false;
            })
          }else {
            axios.post("/product/selectSaleF2",v.priceBut).then(function (response) {
              v.productArr=response.data;
              v.buttonSale=true;
            })
          }
        }
      },
      selectPri() {
        if (v.pNum==0){
          if (v.buttonPri) {
            axios.get("/product/selectPriT").then(function (response) {
              v.productArr = response.data;
              v.buttonPri = false;
            })
          }else {
            axios.get("/product/selectPriF").then(function (response) {
              v.productArr = response.data;
              v.buttonPri = true;
            })
          }
        }else {
          if (v.buttonPri){
            axios.post("/product/selectPriT2",v.priceBut).then(function (response) {
              v.productArr=response.data;
              v.buttonPri=false;
            })
          }else {
            axios.post("/product/selectPriF2",v.priceBut).then(function (response) {
              v.productArr=response.data;
              v.buttonPri=true;
            })
          }
        }

      }
    },
    created:function () {
      axios.get("/product/select").then(function (response) {
        v.productArr=response.data;
      })
      axios.get("/product/selectTotal").then(function (response) {
        v.totalNum=response.data;
      })

     /* axios.get("/category/Select").then(function (response) {
        v.categoryArr=response.data;
      })
      if (location.search.indexOf("wd")!=-1){//接收参数包含wd代表显示查询结果
        axios.get("/product/selectByWd"+location.search).then(function (response) {
          v.productArr=response.data;
        })
      }else {//不包含wd代表显示分类
        //根据地址蓝查询分类ID对应的信息
        axios.get("/product/selectByCId"+location.search).then(function (response) {
          v.productArr=response.data;
        })
      }

      //导航栏下标移动
      this.activeIndex=location.search.split("=")[1]

      */
    }
  })
</script>
</html>
